<template>
    <div class="content" id="appContent">
        <el-switch
            class="subject"
            @change="styleChange"
            v-model="subjectStyle"
        />
        <GraphComponent />
        <DrawerComponent />
        <LabelComponent />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import GraphComponent from '../components/GraphComponent.vue'
import DrawerComponent from '../components/DrawerComponent.vue'
import LabelComponent from '../components/LabelComponent.vue'

// 用于控制页面主题存储
const subjectStyle = ref()

// 页面主题控制函数
function styleChange() {
    const contentStyle = document.getElementById('appContent')
    if (contentStyle) {
        if (subjectStyle.value === false) {
            contentStyle.style.color = '#ffffff'
            contentStyle.style.backgroundColor = '#000000'
        } else {
            contentStyle.style.color = '#000000'
            contentStyle.style.backgroundColor = '#ffffff'
        }
    }
    localStorage.setItem('subjectStyle', subjectStyle.value)
}

onMounted(async () => {
    console.log(localStorage.getItem('subjectStyle'))
    subjectStyle.value = localStorage.getItem('subjectStyle')
        ? Boolean(JSON.parse(localStorage.getItem('subjectStyle')))
        : false
    styleChange()
})
</script>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #000000;
    position: relative;
}

.subject {
    position: absolute;
    right: 2%;
    top: 50px;
    z-index: 1;
}
</style>
